<!--  线 + 柱混合图 -->
<template>
  <div ref="echartRef" :class="className" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, markRaw, watch, reactive } from "vue";
const echartRef = ref<HTMLElement | null>(null);

const props = defineProps({
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "100%",
    required: true,
  },
  datas: {
    type: Object,
    default: () => {
      return {
        xData: [],
        yData: [],
      };
    },
    required: true,
  },
});

function getOption() {
  let option = {
    grid: {
      top: "20%",
      left: "10%",
      right: "2%",
      bottom: "10%",
    },
    xAxis: {
      type: 'category',
      data: props.datas.xData,
      axisLabel: {
        textStyle: {
          color: "#D0DEEE",
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#6C8097",
        },
      },
    },
    // Y轴
    yAxis: {
      type: 'value',
      name: "风速(m/s)",
      axisLine: {
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#D0DEEE",
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(108, 128, 151, 1)",
        },
      },
    },
    tooltip: {
      trigger: "axis",
      formatter(params) {
        let tip =
            "时间:" +
            params[0].axisValue +
            "<br/>风速:" +
            (params[0].value ? params[0].value : "--") +
            "m/s<br/>风向:" +
            (params[0].data ? params[0].data.symbolRotateStr + '（' + params[0].data.symbolRotate + '°）' : "--")
        return tip;
      },
    },
    series: [
      {
        data: props.datas.yData,
        type: 'line',
        smooth: true, //这句就是让曲线变平滑的
        symbol: "arrow", //可以使用默认箭头，也可以换上自己的图片
        // symbol: "image://" + require("../../../assets/img/weather/wind.png"),
        symbolSize: 15,
        //折线样式
        lineStyle: {
          color: '#38FFD7',
          width: 2,
        },
        // symbol样式
        itemStyle: {
          borderWidth: 1,
          borderColor: '#38FFD7',
          color: '#38FFD7'
        }
      }
    ]
  };
  return reactive(option);
}
let chart = ref<any>("");
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(echarts.init(echartRef.value));

  chart.value.setOption(getOption());

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});
watch(
  props,
  (data) => {
    chart.value.setOption(getOption());
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;

  .download {
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
